<script setup>
import { ref, onMounted } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import {
  getCouponService,
  delCouponService,
  insertCouponService,
  updataCouponService,
} from '@/api/coupons'

const couponsList = ref([])
const loading = ref(false)
const dialogVisible = ref(false)
const isEidt = ref(false)
const title = ref('')
const getCouponsMessage = async () => {
  loading.value = true
  const res = await getCouponService()
  couponsList.value = res.data.data
  loading.value = false
  console.log(couponsList.value)
}
onMounted(() => {
  getCouponsMessage()
})

const couponMessage = ref({ coupon_name: null, coupon_code: '', discount: null, status: '' })
const form = ref()
const rules = {
  coupon_name: [
    {
      required: true,
      message: '容量不能为空',
      trigger: 'blur',
    },
    {
      type: 'number',
      message: '满减必须是数字',
      trigger: ['blur', 'change'],
      transform(value) {
        return Number(value)
      },
    },
  ],
  coupon_code: [{ required: true, message: '优惠券代码不能为空', trigger: 'blur' }],
  discount: [
    {
      required: true,
      message: '容量不能为空',
      trigger: 'blur',
    },
    {
      type: 'number',
      message: '优惠金额必须是数字',
      trigger: ['blur', 'change'],
      transform(value) {
        return Number(value)
      },
    },
  ],
  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
}
//下拉菜单的选项列表
const selectedId = ref('')
const couponStyle = ref([
  { id: 'active', label: '有效' },
  { id: 'expired', label: '已过期' },
])

// 发布优惠券
const onAddCoupon = () => {
  title.value = '添加优惠券'
  dialogVisible.value = true
  isEidt.value = true
  couponMessage.value = {
    // 置空表单
    coupon_name: null,
    coupon_code: '',
    discount: null,
    status: '',
  }
  selectedId.value = null //清空下拉菜单选定值
}

const confirm = async () => {
  if (couponMessage.value.status === '') {
    couponMessage.value.status = selectedId.value
    console.log('111', couponMessage.value)
    await insertCouponService(couponMessage.value)
    ElMessage({ type: 'success', message: '发布成功' })
  } else {
    console.log('222', couponMessage.value)
    couponMessage.value.status = selectedId.value
    await updataCouponService(couponMessage.value)
    ElMessage({ type: 'success', message: '修改成功' })
  }
  getCouponsMessage()
  dialogVisible.value = false
}

// 编辑房间列表信息
const onEditChannel = (row) => {
  title.value = '编辑优惠券'
  dialogVisible.value = true
  isEidt.value = false
  couponMessage.value = {
    // 回显表单
    coupon_name: row.coupon_name,
    coupon_code: row.coupon_code,
    discount: row.discount,
    status: row.status,
  }
  selectedId.value = row.status //清空下拉菜单选定值
}

// 删除房间列表信息
const onDelChannel = async (row) => {
  console.log(row.coupon_code)
  await ElMessageBox.confirm('你确认删除该条数据吗？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  })
  await delCouponService(row.coupon_code)
  getCouponsMessage()
  ElMessage({ type: 'success', message: '删除成功' })
}
</script>
<template>
  <page-container title="优惠券">
    <template #extra>
      <el-button type="primary" @click="onAddCoupon">发布优惠券</el-button>
    </template>

    <el-table :data="couponsList" v-loading="loading" style="width: 100%; margin-top: 20px">
      <el-table-column label="序号" align="center" width="100">
        <template #default="{ $index }">
          {{ $index }}
        </template>
      </el-table-column>
      <el-table-column label="代码" prop="coupon_code" align="center"></el-table-column>
      <el-table-column label="满减" prop="coupon_name" align="center"></el-table-column>
      <el-table-column label="优惠金额" prop="discount" align="center"></el-table-column>
      <el-table-column label="状态" align="center">
        <template #default="{ row }">
          <span v-if="row.status === 'active'">有效</span>
          <span v-else>已过期</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100">
        <!-- row 就是 channelList 的一项，类似于item； $index 下标 -->
        <template #default="{ row }">
          <el-button
            :icon="Edit"
            circle
            plain
            type="primary"
            @click="onEditChannel(row)"
          ></el-button>
          <el-button
            :icon="Delete"
            circle
            plain
            type="danger"
            @click="onDelChannel(row)"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据"></el-empty>
      </template>
    </el-table>
    <el-dialog v-model="dialogVisible" :title="title" width="40%">
      <div>
        <el-form
          ref="form"
          style="max-width: 400px"
          :model="couponMessage"
          status-icon
          label-width="auto"
          :rules="rules"
          class="demo-ruleForm"
        >
          <el-form-item label="代码" prop="coupon_code">
            <el-input
              v-model="couponMessage.coupon_code"
              style="width: 250px"
              :disabled="!isEidt"
            />
          </el-form-item>
          <el-form-item label="满减" prop="coupon_name">
            <el-input v-model="couponMessage.coupon_name" style="width: 250px" />
          </el-form-item>
          <el-form-item label="优惠金额" prop="discount">
            <el-input v-model="couponMessage.discount" style="width: 250px" />
          </el-form-item>

          <el-form-item label="状态" prop="status">
            <template #default>
              <el-select v-model="selectedId" style="width: 250px" placeholder="请选择房间">
                <el-option
                  v-for="item in couponStyle"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirm"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </page-container>
</template>
